<template>
    <div class="container">
        <HeaderBar
            current="home"
        />
        <el-carousel class="banner" :height="`${bannerHeight}px`">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index" >
                <img
                    :src="item"
                    class="banner_img"
                    :style="{height: `${bannerHeight}px`}"
                />
            </el-carousel-item>
        </el-carousel>
        <div class="container_main">
            <div class="container_main_title">找单品</div>
            <div class="container_main_category">
                <!-- <div
                    v-for="item in categoryList"
                    :key="item.id"
                    class="container_main_category_item swiper-slide"
                    @click="chooseStyle(item.id, 'category', item.name)"
                >
                    <img
                        :src="item.picture"
                        v-if="item.picture"
                        class="container_main_category_item_icon"
                    />
                    <div class="container_main_category_item_name">{{item.name}}</div>
                </div> -->
                <div class="container_main_category_operate_l" @click="slide()">
                    <img
                        src="../../assets/images/prev.png"
                        class="container_main_category_prev"
                    />
                </div>
                <slider ref="slider" :options="options">
                    <slideritem
                        v-for="item in categoryList"
                        :key="item.id"
                        style="width: 152px;"
                        
                    >
                        <div class="container_main_category_item" @click="chooseStyle(item.id, 'category', item.name)">
                            <img
                                :src="item.picture"
                                v-if="item.picture"
                                class="container_main_category_item_icon"
                            />
                            <div class="container_main_category_item_name">{{item.name}}</div>
                        </div>
                    </slideritem>
                    <div slot="loading">loading...</div>
                </slider>
                <div class="container_main_category_operate_r" @click="slideNext()">
                    <img
                        src="../../assets/images/next.png"
                        class="container_main_category_next"
                    />
                </div>
            </div>
            <div class="container_main_title">
                热门推荐
                <div class="container_main_title_more" @click="showMore"> 
                    查看更多
                    <img
                        src="../../assets/images/index/more.png"
                        class="container_main_title_more_icon"
                    />
                </div>
            </div>
            <div class="container_main_recommendList">
                <div
                    class="container_main_recommendList_item"
                    v-for="item in recommend"
                    :key="item.id"
                >
                    <div class="container_main_recommendList_item_info">
                        <img
                            :src="item.pic"
                            class="container_main_recommendList_item_info_img"
                            @click="godetail(item.id)"
                        />
                        <!-- <div class="container_main_recommendList_item_info_title">{{item.title}}</div> -->
                        <div class="container_main_recommendList_item_info_desc">{{item.desc}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { slider, slideritem } from 'vue-concise-slider'
import {
    GetRecommendList,
    GetCarouselList
} from '@api/api';
import {
    getCategoryList,
} from '@api/shop';
import HeaderBar from '@components/HeaderBar';
export default {
    data() {
        return {
            recommend: [],
            bannerList: [],
            categoryList: [],
            recommendPhone: null,
            bannerHeight: null,
            options: {
                pagination: false,
                currentPage: 0,
                tracking: false,
                thresholdDistance: 100,
                thresholdTime: 300,
                infinite: 6,
                slidesToScroll: 6,
                loop: false
            }
        }
    },
    components: {
        HeaderBar,
        slider,
        slideritem
    },
    created() {
        // let bannerHeight = document.documentElement.clientWidth * 8 / 15;
        let bannerHeight = document.documentElement.clientWidth * 13 / 72;
        this.bannerHeight = bannerHeight;
        this.getList();
        this.getCategory();
        this.getBanners();
        if (this.$route.query.inviteCode) {
            localStorage.setItem('inviteCode', this.$route.query.inviteCode)
        }
    },
    methods: {
        slideNext () {
            this.$refs.slider.$emit('slideNext')
        },
        slide () {
            this.$refs.slider.$emit('slidePre')
        },
        chooseStyle(id, key, name) {
            console.log('id', id)
            this.$router.push({path: '/category/search', query: {type: key, name: encodeURI(name) , id: id}})
        },
        getCategory() {
            getCategoryList()
                .then(res=>{
                    this.categoryList = res.data;
                });
            // this.categoryList = [
            //     {
            //         id: 1,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 2,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 3,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 4,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 5,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 6,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 7,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 8,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 9,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 10,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 11,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     },
            //     {
            //         id: 12,
            //         name: '床',
            //         picture: 'https://img0.baidu.com/it/u=817965773,288336126&fm=26&fmt=auto'
            //     }
            // ]
        },
        getList() {
            let params = {
                pageNo: 1,
                pageSize: 4
            }
            GetRecommendList(params)
                .then(res=>{
                    this.recommend = res.data;
                    console.log('res', res);
                })
        },
        getBanners() {
            // this.bannerList = [
            //     'https://img2.baidu.com/it/u=3341692136,3559947813&fm=15&fmt=auto',
            //     'https://img0.baidu.com/it/u=3414998795,3378750137&fm=15&fmt=auto',
            //     'https://img0.baidu.com/it/u=130695828,2027505437&fm=26&fmt=auto'
            // ]
            GetCarouselList()
                .then(res=>{
                    this.bannerList = res.data;
                })
        },
        showMore () {
            this.$router.push({path: '/recommend'})
        },
        godetail(id) {
            this.$router.push({path: `/recommend/${id}`})
        }
    }
}
</script>
<style>
body {
    background: #F6F6F6;
}
</style>
<style scoped>
    @import './index.css';
</style>